import React from 'react'
import {Modal, Input, Form} from "antd";
import {IRole} from "@/pages/account/role/data";
import {FormComponentProps} from "antd/es/form";

const FormItem = Form.Item;

interface IProps extends FormComponentProps {
  visible: boolean;
  onCancel: () => void;
  onOk: (params: IRole) => void;
}

const formItemLayout = {
  labelCol: {
    xs: {span: 24},
    sm: {span: 8},
    md: {span: 3},
  },
  wrapperCol: {
    xs: {span: 24},
    sm: {span: 12},
    md: {span: 18},
  },
};

class Index extends React.Component<IProps> {

  componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<{}>, snapshot?: any): void {
    console.log('save componentDidUpdate');
  }

  render() {

    const {visible, form, onOk, onCancel} = this.props;

    const id = form.getFieldValue('id');
    let title: string = '修改角色';
    if (id == 0) title = '添加角色';

    return (
      <Modal
        title={title}
        visible={visible}
        onOk={() => {
          form.validateFields((err, fieldsValue) => {
            if (!err) {
              onOk({id: fieldsValue.id, title: fieldsValue.title});
            }
          })
        }}
        onCancel={onCancel}
      >
        <Form {...formItemLayout}>
          <FormItem label={"标题"}>
            {
              form.getFieldDecorator('title', {
                rules: [
                  {
                    required: true,
                    message: '标题不能为空'
                  }
                ]
              })(
                <Input placeholder={"请输入标题"} style={{marginLeft: 5}}/>
              )
            }
          </FormItem>

          <FormItem>
            {
              form.getFieldDecorator('id')(
                <Input type={"hidden"}/>
              )
            }
          </FormItem>

        </Form>
      </Modal>
    );
  }
}

//这里的IProps标识form对象已经传递过去了 不然外面调用的我组件又要提示错误了
export default Form.create<IProps>()(Index)
